<template>
  <j-modal :title="title" :width="600" :visible="visible" :maskClosable="false" @close="close" cancelText="关闭">
    <div style="margin: 0 auto">
      <a-form-model ref="form" :model="model" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item v-if="isAdd" label="上级节点">
          <a-input v-model="model.parentName" disabled></a-input>
        </a-form-model-item>
        <a-form-model-item label="节点名称" prop="modelName">
          <a-input v-model="model.modelName"></a-input>
        </a-form-model-item>
        <a-form-model-item label="模型类型">
          <j-dict-select-tag v-model="model.modelType" dictCode="model_type" />
        </a-form-model-item>
        <a-form-model-item label="功能类型" prop="funcType">
          <j-dict-select-tag v-model="model.funcType" dictCode="model_func_type" />
        </a-form-model-item>
        <template v-if="model.funcType == '2'">
          <a-form-model-item label="流程图上传">
            <j-image-upload v-model="model.mxUrl" bizPath="sjmx"/>
          </a-form-model-item>
          <a-form-model-item label="模型描述">
            <a-input v-model="model.mxms" dictCode="model_func_type" />
          </a-form-model-item>
        </template>
      </a-form-model>
    </div>
    <!-- table区域-end -->
  </j-modal>
</template>
<script>
import { httpAction, getAction } from '@/api/manage'
import JImageUpload from '@/components/jeecg/JImageUpload'
export default {
  name: 'addTreeNode',
  props: ['templateId', 'rowData'],
  components: { JImageUpload },
  data() {
    return {
      isAdd: true,
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      title: '添加节点',
      visible: false,
      model: {},
      rules: {
        modelName: [{ required: true, message: '请输入节点名称' }],
        funcType: [{ required: true, message: '请选择功能类型' }],
      },
      url: {
        add: '/dataModel/addDataModel',
        edit: '/sjxmzygl/sjProjectTemplateTreeFa/edit',
      },
    }
  },
  watch: {
    'model.funcType'(val) {
      console.log(val)
    },
  },
  created() {},
  methods: {
    add(record) {
      if (record) {
        this.model = {
          parentName: record.title,
          pid: record.key,
        }
      }
      this.isAdd = true
      this.visible = true
    },
    edit(record) {
      this.model = {
        name: record.modelName,
        id: record.jid,
      }
      this.isAdd = false
      this.visible = true
    },
    close(isSubmit) {
      if (isSubmit) {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.saveData()
          }
        })
      } else {
        this.visible = false
      }
      this.model = this.$options.data().model
    },
    saveData() {
      let url, type
      if (!this.model.id) {
        url = this.url.add
        type = 'post'
      } else {
        url = this.url.edit
        type = 'put'
      }
      httpAction(url, { proId: this.id, ...this.model }, type).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.$emit('ok')
          this.visible = false
        } else {
          this.$message.error(res.message)
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.name-type {
  width: 110px;
  margin-left: 5px;
  border: 1px solid #e0e0e0;

  /deep/ .ant-select-selection {
    box-sizing: border-box;
    min-height: 27px !important;

    .ant-select-selection__rendered {
      line-height: 27px !important;
    }
  }
}
</style>
